<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="../css/index.css" rel="stylesheet" type="text/css">

</head>

<body>

<style>
span[checkbox]{background-color:#CCC; cursor:pointer;}

span.checkbox1{}
span.checkbox1:hover{background-color:#F1F1F1;}

span.checkbox2{background-color:#1AA1E2;}
span.checkbox2:hover{background-color:#1AE1FF;}

span[for]{cursor:pointer;}

</style>

<div style="margin:200px; padding:100px; border:#000 solid 1px;">

<span class="checkbox1" id="che" checkbox>
<input type="hidden" value="false">&nbsp;
</span>
<span for="che">dddddddddddddd</span>

</div>

<script src="../script/jquery-1.7.1.js"></script>
<script>

$("span[checkbox]").click(function(){
	var _class = $(this).attr("class");
	if(_class == "checkbox1"){
		$(this).removeClass("checkbox1");
		$(this).addClass("checkbox2");
		$(this).children("input[type='hidden']").val("true");
	}else{
		$(this).removeClass("checkbox2");
		$(this).addClass("checkbox1");
		$(this).children("input[type='hidden']").val("false");
	}
});

$("span[for]").click(function(){
	var _for = $(this).attr("for");
	$("#"+_for).click();
});

</script>


</body>
</html>
